<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ball</title>
</head>
<body>
    <svg style="background-color:rgb(8, 8, 16)" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="line-gradient" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#128fff" stop-opacity="0" />
            <stop offset="0.4" stop-color="#128fff" stop-opacity="0.1" />
            <stop offset="0.75" stop-color="#128fff" stop-opacity="0.5" />
            <stop offset="0.85" stop-color="#ffffff" stop-opacity="1" />
            <stop offset="1" stop-color="#ffffff" stop-opacity="1" />
          </linearGradient>
          <linearGradient id="up-light" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#ffffff" stop-opacity="1" />
            <stop offset="0.15" stop-color="#ffffff" stop-opacity="1" />
            <stop offset="0.2" stop-color="#ffffff" stop-opacity="0" />
            <stop offset="1" stop-color="#ffffff" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="down-light" x1="0.6" y1="1" x2="0.3" y2="0">
            <stop offset="0" stop-color="#ffffff" stop-opacity="1" />
            <stop offset="0.005" stop-color="#ffffff" stop-opacity="1" />
            <stop offset="0.06" stop-color="#ffffff" stop-opacity="0" />
            <stop offset="1" stop-color="#ffffff" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="up-gradient" x1="0.5" y1="0" x2="0.5" y2="1">
            <stop offset="0" stop-color="#128fff" stop-opacity="0" />
            <stop offset="0.4" stop-color="#128fff" stop-opacity="0.1" />
            <stop offset="0.75" stop-color="#128fff" stop-opacity="0.3" />
            <stop offset="0.85" stop-color="#128fff" stop-opacity="0.5" />
            <stop offset="1" stop-color="#128fff" stop-opacity="0.5" />
          </linearGradient>
          <linearGradient id="watch-grad" x1="0.25" y1="0" x2="0.75" y2="1">
            <stop offset="0.0" stop-color="#e5edf9"/>
            <stop offset="0.1" stop-color="#e5edf9"/>
            <stop offset="0.5" stop-color="#8cb6f3"/>
            <stop offset="0.99" stop-color="#e5edf9"/>
            <stop offset="1" stop-color="#e5edf9"/>
          </linearGradient>
          <filter id="f1">
            <feOffset result="offOut" in="SourceGraphic" dx="5" dy="2" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
          </filter>
          <filter id="shine">
            <feColorMatrix type="matrix" values=" 0 0 0 0   0 
                                                  0 0 0 0.9 0
                                                  0 0 0 0.9 0
                                                  0 0 0 1   0"/>
            <feGaussianBlur stdDeviation="2.5" result="coloredBlue"/>
            <feMerge>
                <feMergeNode in="coloredBlue"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>
        <circle cx="180" cy="190" r="100" stroke="#07daf1" stroke-width="1" fill="url(#up-light)"/>
        <circle cx="180" cy="190" r="100" stroke="#07daf1" stroke-width="1" fill="url(#down-light)"/>
        <path d="M80 220 A 150 30 0 1 0 280 220" stroke-width="2" fill="none" style="stroke: url(#line-gradient)"></path>
        <circle cx="45" cy="256" r="5" fill="#07daf1" filter="url(#shine)"/>
        <path d="M150 270 A 100 30 0 1 0 210 270" stroke-width="2" fill="none" style="stroke: url(#line-gradient)"></path>
        <path d="M150 70 A 100 30 0 1 0 210 70" stroke-width="1" fill="none" style="stroke: url(#up-gradient)"></path>
        <circle cx="180" cy="190" r="20" fill="#10722f" stroke="#152d39" filter="url(#f1)"/>
        <circle cx="180" cy="190" r="20" fill="url(#watch-grad)"/>
        <path d="M180 190 v -10M180 190 L 190 200" stroke="#0d722e" stroke-width="3"/>
    </svg>
</body>
</html>